<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>QSKJ_LOCAL</title>
    <script src="/Public/Build/Cesium/Cesium.js"></script>
    <script src="/Public/js/ellipsoidTrailMaterialProperty.js"></script>
    <script src="/Public/js/utilsForCesium.js"></script>
    <script src="/Public/js/getDataApi.js"></script>

    <script src="/Public/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/Public/Build/Cesium/Widgets/widgets.css">
</head>

<body>
    <div id="cesiumContainer"></div>
    <script type="module">
        Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0MjczNDgzMy1hYzE1LTRjNWYtODZhMS01MjZkNWRiMDc2MmUiLCJpZCI6ODIxMzAsImlhdCI6MTY0NDU0ODc0M30.LpGXXWsbQXucV5MTeC2g8BCAQWiZp612gosWcK-7ocE"
        var ip = window.location.host.split(':')[0] + ':8083';
        const viewer = new Cesium.Viewer("cesiumContainer", {
            terrain: Cesium.Terrain.fromWorldTerrain(),
            // terrainProvider: await Cesium.CesiumTerrainProvider.fromUrl(
            //     `http://${ip}/terrain/baoxin`,
            // ),
            skyAtmosphere: false,
        });

        viewer.entities.add({
                position: Cesium.Cartesian3.fromDegrees(102.628, 30.248),
                point: {
                    color: Cesium.Color.FIREBRICK,
                    pixelSize: 6,
                    outlineColor: Cesium.Color.DARKSLATEGREY,
                    outlineWidth: 3,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    disableDepthTestDistance: Number.POSITIVE_INFINITY,
                },

            });

        //根据区县id设置蒙版
        getCountyJSON().then(function (data) {
            let arr = []
            data.features[0].geometry.coordinates[0][0].forEach(item => {
                arr.push([item[0], item[1]])
            });
            var cenCN = data.features[0].properties.center

            const polygons = [
                new Cesium.ClippingPolygon({
                    positions: Cesium.Cartesian3.fromDegreesArray(arr.flat(2)),
                }),
            ]
            viewer.scene.globe.clippingPolygons = new Cesium.ClippingPolygonCollection({
                polygons,
            })
            viewer.scene.globe.clippingPolygons.inverse = true
            viewer.camera.setView({
                destination: Cesium.Cartesian3.fromDegrees(
                    cenCN[0],
                    cenCN[1] - 0.7,
                    30000
                ),
                orientation: {
                    heading: Cesium.Math.toRadians(0.0),
                    pitch: Cesium.Math.toRadians(-20),
                    roll: 0.0
                },
            })
        })
        

    </script>
    </div>
</body>

</html>